.Container{
    width: 100%;
    height: 100%;
    background-color: rgb(247, 248, 252);
    display: flex;
    flex-direction: column;
    .Header{
        width: 100%;
        height: 5%;
        // background-color: green;
        display: flex;
        .header-title{
            height: 100%;
            width: 60%;
            background-color: rgb(247, 248, 252);
            // background-color: red;
            display: flex;
            justify-content: center;
            .main-title{
                display: flex;
                justify-content: center;
                height: 100%;
                width: 40%;
                // background-color: aqua;
                text-align: center;
                font-size: 20px;
                align-items: center;
            }
            .note{
                flex: 1;
                // background-color: yellow;
                text-align: center;
                display: flex;
                align-items: center;
                justify-content: center;
                color: gray;
                font-size: 14px;
            }
        }
        .searchInput{
            flex: 1;
            padding:0 5px ;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
    .agentContent{
        flex: 1;
        // background-color: blue;
        display: flex;
        flex-direction: column;
        .tabsList{
            width: 100%;
            height: 5%;
        }
        .tabsContent{
            // flex: 1;
            display: grid;
            gap: 6px;
            grid-template-columns: repeat(2,1fr);
            // min-width: 900px;
            // padding-bottom: 24px;
            width: 100%;
            // background-color: #fff;
            .agentCard{
                width: 100%;
                height: 100%;
                // background-color: yellow;
                border: 1px solid #e8eaf2;
                border-radius: 8px;
                box-sizing: border-box;
                flex-direction: column;
                // min-height: 154px;
                max-height: 154px;
                padding: 10px;
                position: relative;
                transition: .4s ease;
                .cardItem{
                    display: flex;
                    // background-color: red;
                    justify-content: center;
                    height: 100%;
                    max-height: 154px;
                    .cardItem-picture{
                        height: 100%;
                        width: 40%;
                        display: flex;
                        align-items: center;
                        max-height: 154px;
                        margin-right: 5px;
                        // background-color: #fff;
                        // border: 2px solid #fff;
                        img{
                            width: 100%;
                            height: 100%;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            border-radius: 12px;
                            box-shadow: 0 8px 10px 0 rgba(97,92,237,.12);
                            max-height: 88px;
                            min-height: 58px;
                            min-width: 68px;
                            overflow: hidden;
                            width: 88px;
                        }
                    }
                    .cardItem-content{
                        flex: 1;
                        max-height: 154px;
                        display: flex;
                        flex-direction: column;
                        .agentTitle{
                            width: 100%;
                            height: 30%;
                            // text-align: center;
                            // background-color: blue;
                            display: flex;
                            align-items: center;
                            color: #2c2c36;
                            font-size: 16px;
                            font-weight: 500;
                            margin-top: 12px;
                        }
                        .agentNote{
                            flex: 1;
                            font-size: 14px;
                            color: #585a73;
                            font-weight: 400;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            // background-color: aqua;
                        }
                    }
                }
            }
        }
    }
}

.agentCard:hover{
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.24);
}